
<template>
  <view class="body">
	  <view class="box">
		  <view class="tupian">
			  <image src="../../static/images/shou.png" class="tu1"></image>
		  </view>
		  <view class="song">快捷送水</view>
		  <view class="shangpin"> 
		  <i class="iconfont pin shui">&#xe612;</i>
		  <view  class="pin pai" >请选择品牌</view>
		  <view class="pin tong">1桶</view>
		  </view>
		  <view class="shangpin">
			  <i class="iconfont pin shui">&#xe6bc;</i>
			  <view  class="pin pai" >03月03日</view>
			  <view class="pin shi">18:00:00</view>
		  </view>
		   <view class="shangpin">
		  			  <i class="iconfont pin shui">&#xeb0e;</i>
		  			  <view  class="pin pai" >请填写日历地址</view>
		  			  <view class="pin didi">选择地址</view>
		  </view>
		    <button class="quen" @tap="gotosong()">确认</button> 
		  <view class="remen">
			  <view class="biaoti">
				  <i class="iconfont xing">&#xe601;</i>
				  <view class="reshang">热门活动</view>
			  </view>
			  <!-- 活动说明-->
			  <view class="warptu">
				   <view class="tulist">
				  		<view class="retu">
							<view class="huodong">活动一</view>
							<view class="shuoming"> 活动说明</view>
							<image class="huotu" src="../../static/tu1.png"></image>
						</view>		
						<view class="retu rtu">
						  	<view class="huodong">活动二</view>
						  	<view class="shuoming"> 活动说明</view>
						  	<image class="huotu" src="../../static/tu1.png"></image>
						</view>
						<view class="retu rtu1">
						  	<view class="huodong">活动三</view>
						  	<view class="shuoming"> 活动说明</view>
						  	<image class="huotu" src="../../static/tu1.png"></image>
						</view>		
						<view class="retu rtu2">
						  	<view class="huodong">活动三</view>
						  	<view class="shuoming"> 活动说明</view>
						  	<image class="huotu" src="../../static/tu1.png"></image>
						</view>										
				  </view>
			  </view>
		  </view>
		   <!-- 热门商品-->
		   <view class="rehuodong">
		      <view class="biaoti">
		  			<i class="iconfont xing">&#xe601;</i>
		  			<view class="reshang">热门商品</view>
		      </view>		
					<!-- 列表一 -->
		  		<view class="shanglist">
					<view class="warpshang">
						<view class="shang1">
							<image class="shoutu" src="../../static/images/shutongtu.png"></image>
							<view class="wenzi">
								<view class="wenzi1">
									<i class="iconfont xing xing1">&#xe601;</i>
									<view class="yuan1">原产地直产，品牌直卖</view>
								</view>
		                         <view class="lao">崂山矿泉水崂山矿泉水崂山矿泉水</view>
								 <view class="lao">崂山矿泉水崂山矿泉水崂山矿泉水</view>
								 <view class="lao shui1">富含矿物质，富含矿物质</view>
								 <view class="jiaqian">
									 <i class="iconfont qian">&#xe604;18</i>
									 <i class="heng1"></i>
									 <view class="jia">单价：18</view>
								 </view>
								 <view class="ziying">
									 <i class="iconfont zi">&#xe60a;</i>
									 <view class="pingjhia1">3000条评价，97.8%好评</view>
								 </view>
								 <view class="dixian"></view>
							</view>
						</view>
					</view>	
				</view>	
				<!-- 列表二 -->	
			<view class="shanglist shanglset1">
				<view class="warpshang">
					<view class="shang1">
						<image class="shoutu" src="../../static/images/shutongtu.png"></image>
						<view class="wenzi">
							<view class="wenzi1">
								<i class="iconfont xing xing1">&#xe601;</i>
								<view class="yuan1">原产地直产，品牌直卖</view>
							</view>
			                 <view class="lao">崂山矿泉水崂山矿泉水崂山矿泉水</view>
							 <view class="lao">崂山矿泉水崂山矿泉水崂山矿泉水</view>
							 <view class="lao shui1">富含矿物质，富含矿物质</view>
							 <view class="jiaqian">
								 <i class="iconfont qian">&#xe604;18</i>
								 <i class="heng1"></i>
								 <view class="jia">单价：18</view>
							 </view>
							 <view class="ziying">
								 <i class="iconfont zi">&#xe60a;</i>
								 <view class="pingjhia1">3000条评价，97.8%好评</view>
							 </view>
							 <view class="dixian"></view>
						</view>
					</view>
				</view>	
			</view>					  
		   </view>
	  </view>
	   <view class="bottom">
		   <view class="bottom-1">
			   <view class="mes">
			   	<img src="../../static/7_13.gif" alt="">
			   	<view class="right">
			   		<p class="p2">崂山矿泉水崂山矿泉水崂山矿泉水崂山矿泉水崂山矿泉水</p>
			   		<p class="p3">富含矿物质，富含矿物质</p>
			   		<p class="p4">￥18</p>
			   		<span class="span1">单件￥20</span>
			   		<P class="p5">自营</P>
			   		<span class="span2">30000条评价 97.8%好评</span>
			   	</view>
			   </view>
			   <view class="pinpai">
				   <p>品牌</p>
			   </view>
			   <view class="guige">
				   <p>大板水12元</p>
				   <p>大板水15元</p>
				   <p>大板水18元</p>
				   <p>大板水12元</p>
				   <p>大板水15元</p>
				   <p>大板水18元</p>
			   </view>
			   <view class="two">
				   <button class="p1">取消</button>
				   <button class="p2">确定</button>
			   </view>
		   </view>
	   </view>
	</view>
	
	
</template>

<script>
	
	export default {

		data() {
			return {
			
			}
		},
		onLoad() {

		},
		methods: {
            gotosong(){
				uni.navigateTo({
					url:"../../components/waterconfirmes/warterconfirm"
				})
			},
			
			
			
			
			
			
			
			
			
		},
	}
</script>

<style>
	.two .p1{
		left: -70px;
		top: 26px;
		width: 140px;
		height: 40px;
		border-radius: 4px;
		font-size: 14px;
		text-align: center;
		font-family: Microsoft Yahei;
        background-color: rgba(59, 156, 219, 1);
        color: rgba(255, 255, 255, 1);
	}
	.two .p2{
		left:  85px;
		top: -15px;
		width: 140px;
		height: 40px;
		border-radius: 4px;
		background-color: rgba(59, 156, 219, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 14px;
		text-align: center;
		font-family: Microsoft Yahei;

	}
	.guige p{
		left: 143px;
		top: 916px;
		width: 94px;
		height: 70upx;
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(51, 51, 51, 1);
		font-size: 12px;
		text-align: center;
		font-family: Microsoft Yahei;
		border: 2upx solid rgba(153, 153, 153, 1);
		float: left;
		margin-left: 28upx;
		margin-top:20upx;
}
	.pinpai{
		margin-left: 40upx;
		margin-top:20upx;
		width: 84upx;
		height: 40upx;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
		
        
	}
	.bottom{
		/* left: 10px;
		top: 719px; */
		width: 95%;
		height: 415px;
		line-height: 20px;
		border-radius: 5px;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		position:fixed;
		z-index:3;
		margin-top:-300px;
		margin-left: 10px;
        display: flex;
		flex-direction: column;
		position: absolute;
		top: 995upx;
		left: 5upx;
	}
	.body{
		width: 100%;
		height: 547px;
		background-color:rgba(187, 187, 187, 0.9);
		/* opacity:0.4; */
		position:fixed;
		z-index:999;
		
	}
  .box{
 	 width: 100%;
 	 height: 499upx;
 	 display: flex;
 	 flex-direction: column;
  }
  .tupian{
 	 width: 100%;
 	 height: 376upx;
 	 margin: 5upx 0upx 0upx 10upx;
  }
  .tu1{
 	 width: 96%;
 	 height: 376upx;
  }
  .song{
 	 color: #3B9CDB ;
 	 text-align: center;
 	 margin-top: 20upx;
  }
  .shangpin{
 	width: 100%;
 	height: 80upx;
 	border-bottom: 2upx solid #EEEEEE ;
  }
  .pin{
 	 float: left;
 	 line-height: 80upx;
 	 color: #999999 ;
  }
  .shui{
 	 margin-left: 38upx;
  }
  .pai{
 	 margin-left: 12upx;
 	 font-size: 14px;
  }
  .tong{
 	 float: right;
 	 margin-right: 236upx;
  }
  .shi{
 	 float: right;
 	 padding-right: 110upx;
  }
  .didi{
 	 float: right;
 	 font-size: 12px;
      padding-right: 34upx;	
  }
  .quen{
 	 width: 680upx;
 	 height: 80upx;
 	 background: #3B9CDB;
 	 color: #FFFFFF;
 	 font-size: 14px;
 	 line-height: 80upx;
 	 margin: 20upx 34upx 26upx 34upx;
  }
  .remen{
 	 width: 750upx;
 	 height: 410upx;
  }
  .biaoti{
 	 padding-top: 32upx;
 	 padding-left: 274upx;
  }
  .xing{
 	 float: left;
 	 color: #3B9CDB;
  }
  .reshang{
 	 float: left;
 	 margin-left: 12upx;
 	 color: #3B9CDB;
  }
  .warptu{
 	 width: 750upx;
 	 height: 380upx;
  }
  .tulist{
 	 position: relative;
 	 width: 100%;
  }
  .retu{
 	 position: absolute;
 	 left: 30upx;
 	 top: 70upx;
 	 width: 330upx;
 	 height: 118upx;
 	 background: #EBF0F2;
 	 border-radius: 5px;
  }
  .huodong{
 	 font-size: 14px;
 	 margin-top: 10upx;
 	 margin-left: 28upx;
  }
  .shuoming{
 	 font-size: 12px;
 	 color: #607D8B;
 	 margin-top: 12upx;
 	 margin-left: 28upx;
  }
  .huotu{
 	 width: 104upx;
 	 height: 104upx;
 	 position: absolute;
 	 top: 8upx;
 	 left: 220upx;
 	 border-radius: 50%;
  }
  .rtu{
 	 position: absolute;
 	 top: 70upx;
 	 left: 386upx;
  }
  .rtu1{
 	 position: absolute;
 	 top: 250upx;
 	 left: 30upx;
  }
  .rtu2{
 	 position: absolute;
 	 top: 253upx;
 	 left: 387upx;
  }
  .rehuodong{
 	 width:750upx;
 	 height: 708upx;
  }
  .shoutu{
 	 width: 216upx;
 	 height: 218upx;
 	 float: left;
  }
  .wenzi{
 	float: left;
 	width: 70%;
  }
  .shanglist{
 	 width: 720upx;
 	 height: 240upx;
 	 margin: 120upx 8upx 8upx 22upx;
  }
  .xing1{
 	 width: 50upx;
 	 height: 24upx;
 	 padding-left: 46upx;
  }
 .yuan1{
 	font-size: 12px;
 	color: #BBBBBB;
 }
 .lao{
 	font-size: 15px;
 	margin-left: 46upx;
 }
 .shui1{
 	font-size: 12px;
 	color: #BBBBBB;
 	margin-left: 46upx;
 }
 .jiaqian{
 	width: 220upx;
 	height: 56upx;
 }
 .qian{
 	color: #3B9CDB;
 	margin-left: 46upx;
 	float: left;
 	font-size: 15px;
 }
 .jia{
 	font-size: 11px;
 	color: #BBBBBB;
 	float: left;
 	line-height: 46upx;
 }
 .heng1{
 	float: left;
 	width: 2upx;
 	height: 20upx;
 	background: #ABABAB;
 	margin-top: 14upx;
 }
 .ziying{
 	width: 420upx;
 	height: 32upx;
 }
 .zi{
 	float: left;
 	color: #3B9CDB;
 	font-size: 11px;
 	background: #FFFFFF;
 	margin-left: 46upx;
 }
 .pingjhia1{
 	float: left;
 	font-size: 11px;
 	color: #ABABAB;
 	margin-left: 8upx;
 }
  .dixian{
 	 width: 440upx;
 	 height: 2upx;
 	 background: #ABABAB;
 	 margin-left: 46upx;
  }
  .shanglset1{
 	margin: 0px 8upx 8upx 22upx;
  }
 /* 小白色 */
 .mes{
 	margin-top:20px;
 	
 }
 .mes img{
 	/* left: 11px;
 	top: 129px; */
 	margin-left: 11px;
 	width: 108px;
 	height: 109px;
 	border-radius: 5px;
 	/* margin: auto; */
 }
 .mes .right{
 	float: right;
 	border-bottom:1px solid #eee;
 }
 
 .mes .right img{
 	left: 142px;
 	top: 128px;
 	width: 25px;
 	height: 12px;
 
 }
 .mes .right .p1{
 	left: 169px;
 	top: 125px;	
 	width: 125px;
 	height: 19px;
 	line-height: 17px;
 	color: rgba(187, 187, 187, 1);
 	font-size: 12px;
 	text-align: left;
 	font-family: PingFangSC-regular;
 
 }
 .mes .right .p2{
 	left: 142px;
 	top: 142px;
 	width: 229px;
 	height: 45px;
 	line-height: 22px;
 	color: rgba(16, 16, 16, 1);
 	font-size: 15px;
 	text-align: left;
 	font-family: PingFangSC-regular;
 
 }
 .mes .right .p3{
 	left: 143px;
 	top: 187px;
 	width: 121px;
 	height: 16px;
 	line-height: 16px;
 	color: rgba(171, 171, 171, 1);
 	font-size: 11px;
 	text-align: left;
 	font-family: PingFangSC-regular;
 
 }
 .mes .right .p4{
     left: 140px;
 	top: 203px;
 	width: 53px;
 	height: 26px;
 	line-height: 26px;
 	color: rgba(59, 156, 219, 1);
 	font-size: 18px;
 	text-align: left;
 	font-family: PingFangSC-regular;
 
 }
 .mes .right .span1{
 	left: 185px;
 	top: 157px;
 	width: 56px;
 	height: 16px;
 	line-height: 16px;
 	color: rgba(171, 171, 171, 1);
 	font-size: 11px;
 	text-align: left;
 	font-family: PingFangSC-regular;
 	border-left: 1px soild #eee;
 	float:right;
 	margin-top:-20px;
 	margin-right:125px;
 	
 }
 .mes .right .p5{
 	left: 148px;
 	top: 230px;
 	width: 27px;
 	height: 16px;
 	line-height: 16px;
 	color: rgba(59, 156, 219, 1);
 	font-size: 11px;
 	text-align: left;
 	font-family: PingFangSC-regular;
 	border:1px solid #3B9CDB;
 
 }
 .mes .right .span2{
 	left: 181px;
 	top: 230px;
 	width: 151px;
 	height: 16px;
 	line-height: 16px;
 	color: rgba(171, 171, 171, 1);
 	font-size: 11px;
 	text-align: left;
 	font-family: PingFangSC-regular;
 	margin-top:-15px;
 	margin-right: 35px;
 	float: right;
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
	
	
</style>
